<template>
  <div class="case">
    <div class="filter-container">
      <!-- <el-select
        v-model="tableQuery.channel"
        clearable
        @clear="tableQuery.channel = ''"
        placeholder="审核事项"
        class="filter-item"
      >
        <el-option
          v-for="item in channels"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <el-select
        v-model="tableQuery.register_channel"
        clearable
        @clear="tableQuery.register_channel = ''"
        placeholder="获客渠道"
        class="filter-item"
      >
        <el-option
          v-for="item in register_channels"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="tableQuery.apply_code"
        @keyup.enter.native="handleFilter"
        style="width: 200px;"
        placeholder="申请编号"
        size="small"
        class="filter-item"
      ></el-input>
      <el-input
        v-model="tableQuery.name"
        size="small"
        @keyup.enter.native="handleFilter"
        class="filter-item"
        style="width: 200px;"
        placeholder="姓名"
      ></el-input>
      <el-input
        v-model="tableQuery.phone"
        size="small"
        @keyup.enter.native="handleFilter"
        class="filter-item"
        style="width: 200px;"
        placeholder="手机号"
      ></el-input>
      <el-input
        v-model="tableQuery.id_card"
        size="small"
        @keyup.enter.native="handleFilter"
        style="width: 200px;"
        class="filter-item"
        placeholder="身份证"
      ></el-input>
      <el-select
        v-model="tableQuery.result"
        clearable
        placeholder="请选择"
        size="small"
        class="filter-item"
      >
        <el-option
          v-for="(item, key) in resultType"
          :key="item"
          :label="item"
          :value="key"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="datePicker"
        type="datetimerange"
        align="left"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        style="width: 410px"
        clearable
        class="filter-item"
      >
      </el-date-picker>
      <el-button
        @click="handleFilter"
        type="primary"
        size="small"
        ref="btnQuery"
        class="filter-item"
        >查询</el-button
      >
      <el-button
        @click="handleReset"
        size="small"
        type="primary"
        ref="btnRefresh"
        class="filter-item"
        >刷新</el-button
      >
      <el-button
        size="small"
        @click="exportData"
        type="primary"
        v-show="exportShow"
        ref="btnExport"
        class="filter-item"
        >导出数据</el-button
      >
    </div>
    <TitleContainer />
    <el-table :data="tableData" fit border style="width: 100%;">
      <el-table-column
        label="id"
        prop="id"
        align="center"
        width="100px"
      ></el-table-column>
      <el-table-column
        label="申请编号"
        prop="apply_code"
        align="center"
        width="200px"
      ></el-table-column>
      <el-table-column
        label="产品类型"
        prop="channelName"
        align="center"
        width="160px"
      ></el-table-column>
      <el-table-column
        label="获客渠道"
        prop="registerChannel"
        align="center"
        width="160px"
      ></el-table-column>
      <el-table-column
        label="姓名"
        prop="name"
        align="center"
        width="100px"
      ></el-table-column>
      <el-table-column
        label="手机号"
        prop="mobile"
        align="center"
        width="130px"
      ></el-table-column>
      <el-table-column
        label="身份证号"
        prop="cardNo"
        align="center"
        width="170px"
      ></el-table-column>
      <el-table-column
        label="审核事项"
        prop="approveType"
        align="center"
        width="170px"
      ></el-table-column>
      <!--<el-table-column label="申请金额" prop="apply_amount" align="left"></el-table-column>-->
      <el-table-column
        label="审批额度"
        prop="approve_amount"
        align="center"
      ></el-table-column>
      <el-table-column
        label="申请时间"
        prop="create_at"
        align="center"
        width="160px"
      ></el-table-column>
      <el-table-column
        label="审核时间"
        prop="audit_at"
        align="center"
        width="160px"
      ></el-table-column>
      <el-table-column
        label="结果"
        prop="result"
        align="center"
        width="100px"
      ></el-table-column>
      <el-table-column
        label="原因"
        prop="reason"
        align="center"
        width="280px"
      ></el-table-column>
      <el-table-column
        label="知识包"
        prop="package_name"
        align="center"
        width="280px"
      ></el-table-column>
      <el-table-column
        label="知识包版本"
        prop="package_version"
        align="center"
        width="100px"
      ></el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="120px">
        <template slot-scope="scope">
          <a
            v-if="
              scope.row.apply_risk_source == 2 ||
                scope.row.apply_risk_source == 14
            "
            @click="handleDetail(scope.row.apply_code)"
            class="click-btn"
            style="margin-right:8px"
            >详情</a
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="tableQuery.current_page"
        :page-sizes="[10, 20, 30]"
        :page-size="tableQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import TitleContainer from '@/components/title/TitleContainer.vue'
import { parseTimeJS as parseTime } from '@/utils'
interface ListQuery {
  [propName: string]: any
}
@Component({
  name: 'incomingAnalvsis',
  components: {
    //引用的组件在这里声明
    TitleContainer
  }
})
export default class extends Vue {
  private listLoading: boolean = false
  private downloadLoading: boolean = false
  private datePicker = []
  private tableQuery = []
  private resultType = {
    pass: '通过',
    manual: '策略人工审核',
    refuse: '策略拒绝',
    exception: '策略审核中',
    pending: 'Pengding',
    manual_init: '人工审核中',
    manual_pass: '人工审核通过',
    manual_refuse: '人工审核拒绝'
  }
  // private tableQuery = Object.assign({}, defaultQuery)
  private title = '信审平台'

  private total = null
  private tableData = [
    {
      id: '7588',
      apply_risk_source: '2',
      individual_id: '1449',
      product_id: '0',
      apply_code: '5de64dca7f000001509385fe',
      name: '钟高筠',
      cardNo: '510121198404187822',
      mobile: '13518163159',
      approve_amount: '12000',
      create_at: '2019-12-03 19:58:02',
      audit_at: '2019-12-03 19:59:01',
      result: '通过',
      approveType: '唐山银行微信渠道',
      channelName: '',
      reason: '',
      package_name: 'demo/BeforeLoanPackage',
      package_version: '1.3'
    },
    {
      id: '7587',
      apply_risk_source: '14',
      individual_id: '1449',
      product_id: '0',
      apply_code: '5de64d7d7f0000013ddb522f',
      name: '钟高筠',
      cardNo: '510121198404187822',
      mobile: '13518163159',
      approve_amount: '12000',
      create_at: '2019-12-03 19:56:45',
      audit_at: '2019-12-03 19:57:31',
      result: '通过',
      approveType: '唐山银行微信渠道',
      channelName: '',
      reason: '',
      package_name: 'demo/BeforeLoanPackage',
      package_version: '1.4'
    },
    {
      id: '7586',
      apply_risk_source: '14',
      individual_id: '1449',
      product_id: '0',
      apply_code: '5de64d2f7f0000015072a96a',
      name: '钟高筠',
      cardNo: '510121198404187822',
      mobile: '13518163159',
      approve_amount: '12000',
      create_at: '2019-12-03 19:55:27',
      audit_at: '2019-12-03 19:56:01',
      result: '通过',
      approveType: '唐山银行微信渠道',
      channelName: '',
      reason: '',
      package_name: 'demo/BeforeLoanPackage',
      package_version: '1.3'
    },
    {
      id: '7585',
      apply_risk_source: '14',
      individual_id: '1448',
      product_id: '0',
      apply_code: '5de64cc07f000001507df421',
      name: '谢林',
      cardNo: '510922198908050010',
      mobile: '18702864140',
      approve_amount: '12000',
      create_at: '2019-12-03 19:53:36',
      audit_at: '2019-12-03 19:54:31',
      result: '通过',
      approveType: '唐山银行微信渠道',
      channelName: '',
      reason: '',
      package_name: 'demo/BeforeLoanPackage',
      package_version: '1.4'
    },
    {
      id: '7584',
      apply_risk_source: '14',
      individual_id: '1449',
      product_id: '0',
      apply_code: '5de646577f000001506641d6',
      name: '钟高筠',
      cardNo: '510121198404187822',
      mobile: '13518163159',
      approve_amount: '0',
      create_at: '2019-12-03 19:26:16',
      audit_at: '2019-12-03 19:27:01',
      result: '策略拒绝',
      approveType: '唐山银行微信渠道',
      channelName: '',
      reason: '',
      package_name: 'demo/BeforeLoanPackage',
      package_version: '1.3'
    },
    {
      id: '7583',
      apply_risk_source: '14',
      individual_id: '1449',
      product_id: '0',
      apply_code: '5de642467f00000150c08283',
      name: '钟高筠',
      cardNo: '510121198404187822',
      mobile: '13518163159',
      approve_amount: '0',
      create_at: '2019-12-03 19:08:54',
      audit_at: '2019-12-03 19:09:31',
      result: '策略拒绝',
      approveType: '唐山银行微信渠道',
      channelName: '',
      reason: '',
      package_name: 'demo/BeforeLoanPackage',
      package_version: '1.4'
    },
    {
      id: '7582',
      apply_risk_source: '14',
      individual_id: '1449',
      product_id: '0',
      apply_code: '5de641f47f000001508ef669',
      name: '钟高筠',
      cardNo: '510121198404187822',
      mobile: '13518163159',
      approve_amount: '0',
      create_at: '2019-12-03 19:07:32',
      audit_at: '2019-12-03 19:08:31',
      result: '策略拒绝',
      approveType: '唐山银行微信渠道',
      channelName: '',
      reason: '',
      package_name: 'demo/BeforeLoanPackage',
      package_version: '1.3'
    },
    {
      id: '7581',
      apply_risk_source: '14',
      individual_id: '1449',
      product_id: '0',
      apply_code: '5de640137f00000150974463',
      name: '钟高筠',
      cardNo: '510121198404187822',
      mobile: '13518163159',
      approve_amount: '0',
      create_at: '2019-12-03 18:59:31',
      audit_at: '2019-12-03 19:01:03',
      result: '策略拒绝',
      approveType: '唐山银行微信渠道',
      channelName: '',
      reason: '',
      package_name: 'demo/BeforeLoanPackage',
      package_version: '1.4'
    },
    {
      id: '7580',
      apply_risk_source: '14',
      individual_id: '1449',
      product_id: '0',
      apply_code: '5de63ee67f00000150921f02',
      name: '钟高筠',
      cardNo: '510121198404187822',
      mobile: '13518163159',
      approve_amount: '0',
      create_at: '2019-12-03 18:57:36',
      audit_at: '2019-12-03 18:58:31',
      result: '策略拒绝',
      approveType: '唐山银行微信渠道',
      channelName: '',
      reason: '',
      package_name: 'demo/BeforeLoanPackage',
      package_version: '1.3'
    },
    {
      id: '7579',
      apply_risk_source: '14',
      individual_id: '1422',
      product_id: '0',
      apply_code: '5de62f907f000001507ca882',
      name: '邓江',
      cardNo: '511621198609228358',
      mobile: '13678170163',
      approve_amount: '0',
      create_at: '2019-12-03 17:49:05',
      audit_at: '2019-12-03 17:50:01',
      result: '策略拒绝',
      approveType: '唐山银行微信渠道',
      channelName: '',
      reason: '',
      package_name: 'demo/BeforeLoanPackage',
      package_version: '1.4'
    }
  ]
  private channels = [
    { label: '济时雨贷前风控', value: 2 },
    { label: '济时雨支用风控', value: 4 },
    { label: '京东金条贷前风控', value: 9 },
    { label: '百度有钱花贷前风控', value: 8 },
    { label: '百度有钱花支用风控', value: 11 },
    { label: '借呗贷前风控', value: 7 },
    { label: '花呗贷前风控', value: 6 },
    { label: '网商贷贷前风控', value: 10 }
  ]
  private register_channels = [
    { label: '济时雨贷前风控', value: 2 },
    { label: '济时雨支用风控', value: 4 },
    { label: '京东金条', value: 9 },
    { label: '百度贷前风控', value: 8 },
    { label: '百度支用', value: 11 },
    { label: '借呗', value: 7 },
    { label: '花呗', value: 6 },
    { label: '网商贷', value: 10 }
  ]
  private sourcesOptions = []
  // 公共查询对象
  private listQuery: ListQuery = {
    // 分页对象
    search: {
      name: undefined,
      cer_no: undefined,
      mobile: undefined,
      source_id: undefined,
      signup_begin: undefined,
      signup_end: undefined,
      credit_status: undefined,
      has_debt: undefined
    },
    orderby: {
      field: undefined,
      direction: undefined
    },
    limit: 50,
    page: 1
  }
  @Watch('datePicker')
  private onDatePickerChange(value: boolean) {
    this.listQuery.search.signup_begin = this.datePicker
      ? parseTime(this.datePicker[0])
      : undefined
    this.listQuery.search.signup_end = this.datePicker
      ? parseTime(this.datePicker[1])
      : undefined
  }
  // 跳转页码查询
  handleCurrentChange(val: any) {
    this.listQuery.page = val
    this.getList()
  }
  // size切换查询
  handleSizeChange(val: any) {
    this.listQuery.limit = val
    this.getList()
  }
  handleFilter() {
    this.listQuery.page = 1
    this.getList()
  }
  // xmlhttp请求
  private async getList() {
    this.listLoading = true
    // ajax 请求相应list
    // if (this.source_idArr.length > 0) {
    //   this.listQuery.search.source_id = this.source_idArr[
    //     this.source_idArr.length - 1
    //   ]
    // } else {
    //   this.listQuery.search.source_id = undefined
    // }
    // const { data } = await getUserList(this.listQuery)
    // this.list = data.list
    // this.total = data.total
    // this.listLoading = false
  }
  private async getSources() {
    this.sourcesOptions = []
    // const { data } = await getSources()
    // this.sourcesOptions = this.executeCasData(data.list)
  }
  private handleDetail() {
    this.$router.push({
      path: '/risksystem/case/incomingDetail'
    })
  }
  exportData() {
    // let href = this.HOST_PROXY_ADMIN + 'v1/risk/apply-risk/export?'
    console.log(this.tableQuery)

    // for (let item of Object.entries(this.tableQuery)) {
    //   if (item[1] === null || item[1] === '') continue
    //   href += `&${item[0]}=${item[1]}`
    // }
    // window.location.href = href

    // this.tableQuery.apply_code +
    // '&phone=' + this.tableQuery.phone +
    // '&name=' + this.tableQuery.name +
    // '&result=' + this.tableQuery.result +
    // '&begin_grant_at=' + this.tableQuery.begin_grant_at +
    // '&end_grant_at=' + this.tableQuery.end_grant_at +
    // '&channel=' + this.tableQuery.channel +
    // '&id_card=' + this.tableQuery.id_card;
    // window.location.href = href;
  }
  // computed: {
  //   exportShow() {
  //     if(this.$store.state.user.env === 'xydemo') {
  //         return false;
  //     }
  //     return true;
  //   }
  // }
}
</script>

<style scoped>
.case {
  padding: 20px;
}
.table-container {
  margin-bottom: 20px;
}
</style>
